<div class="page plantilla-pe">

    <div class="row">
        <div class="col-xs-12">
            <h2 class="section-header" data-translate="PAGE_PE_X_CLIENT_TITLE"></h2>
        </div>

        <div class="col-md-12" data-ng-controller="ListarClientesConPECtrl">
            <section class="panel panel-default table-dynamic">
                <div class="table-filters">
                    <div class="row">
                        <div class="col-sm-4 col-xs-6">
                            <form>
                                <input type="text"
                                       placeholder="{{'GENERIC_LIST_SEARCHBOX' | translate}}"
                                       class="form-control"
                                       data-ng-model="searchKeywords"
                                       data-ng-keyup="search()">
                            </form>
                        </div>
                        <div class="col-sm-3 col-xs-6 filter-result-info">
                            <span>
                                <span data-translate="GENERIC_LIST_SHOWING"></span> {{filteredItems.length || 0}}/{{items.length || 0}} <span data-translate="GENERIC_LIST_ENTRIES"></span>
                            </span>              
                        </div>
                    </div>
                </div>

                <table class="table table-bordered table-striped table-responsive">
                    <thead>
                        <tr>
                            <th><div class="th">
                                <span data-translate="PAGE_USERS_TH_ID"></span>
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('Identificacion') "
                                      data-ng-class="{active: row == 'Identificacion'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-Identificacion') "
                                      data-ng-class="{active: row == '-Identificacion'}"></span>
                            </div></th>
                            <th><div class="th">
                                <span data-translate="PAGE_USERS_TH_NAME"></span>
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('Nombre') "
                                      data-ng-class="{active: row == 'Nombre'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-Nombre') "
                                      data-ng-class="{active: row == '-Nombre'}"></span>
                            </div></th>
                            <th><div class="th">
                                <span data-translate="PAGE_USERS_TH_LAST_NAME"></span>
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('PApellido') "
                                      data-ng-class="{active: row == 'PApellido'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-PApellido') "
                                      data-ng-class="{active: row == '-PApellido'}"></span>
                            </div></th>
                            <th><div class="th">
                                <span data-translate="PAGE_USERS_TH_SECOND_SURNAME"></span>
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('SApellido') "
                                      data-ng-class="{active: row == 'SApellido'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-SApellido') "
                                      data-ng-class="{active: row == '-SApellido'}"></span>
                            </div></th>
                            <th><div class="th">
                                <span data-translate="PAGE_USERS_TH_USERNAME"></span>
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('NombreUsuario') "
                                      data-ng-class="{active: row == 'NombreUsuario'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-NombreUsuario') "
                                      data-ng-class="{active: row == '-NombreUsuario'}"></span>
                            </div></th>
                            <th class="actions-column"><div class="th">
                                <span data-translate="GENERIC_LIST_TABLE_TH_ACTIONS"></span>
                            </div></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-ng-repeat="item in currentPageItems">
                            <td>{{item.Identificacion}}</td>
                            <td>{{item.Nombre}}</td>
                            <td>{{item.PApellido}}</td>
                            <td>{{item.SApellido}}</td>
                            <td>{{item.NombreUsuario}}</td>
                            <td>
                                <md-button data-ng-click="verPEs($event, item)" aria-label="{{'PAGE_PE_CTA_VIEW_PE' | translate}}" title="{{'PAGE_PE_CTA_VIEW_PE' | translate}}" class="md-icon-button"><span class="imd imd-arrow-forward"></span></md-button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <footer class="table-footer">
                    <div class="row">
                        <div class="col-md-6 page-num-info">
                            <span>
                                <span data-translate="GENERIC_LIST_ITEMS_X_PAGE_SHOW"></span> 
                                <select data-ng-model="numPerPage"
                                        data-ng-options="num for num in numPerPageOpt"
                                        data-ng-change="onNumPerPageChange()">
                                </select> 
                                <span data-translate="GENERIC_LIST_ITEMS_X_PAGE_ENTRIES"></span> 
                            </span>
                        </div>
                        <div class="col-md-6 text-right pagination-container">
                            <pagination class="pagination-sm"
                                        ng-model="currentPage"
                                        total-items="filteredStores.length"
                                        max-size="4"
                                        ng-change="select(currentPage)"
                                        items-per-page="numPerPage"
                                        rotate="false"
                                        previous-text="&lsaquo;" next-text="&rsaquo;"
                                        first-text="{{'GENERIC_PAGINATION_FIRST_TEXT' | translate}}" last-text="{{'GENERIC_PAGINATION_LAST_TEXT' | translate}}"
                                        boundary-links="true"></pagination>
                        </div>
                    </div>
                </footer>
            </section>
        </div>

    </div>

</div>